<extend name="./Public/base" />
<block name="title">主页</block>
<block name="head">
	<load href="__PUBLIC__/Css/index.css"/>
</block>
<block name="header">
	<include file="Application/Home/View/Public/header_index.html"/>
</block>

<block name="main">
	<div id="page">
		<div class="section section1"><img src="__PUBLIC__/Images/section1.jpg"/></div>
		<div class="section section2"><img src="__PUBLIC__/Images/section2.jpg"/></div>
		<div class="section section3"><img src="__PUBLIC__/Images/section3.jpg"/></div>
		<div class="section section4"><img src="__PUBLIC__/Images/section4.jpg"/></div>
	</div>
	<script>
		$(function(){
			$("#page").fullpage({
//				sectionsColor:["#B5A8A7","#E9E6D3","blue","green"],
				navigation:true,
				navigationTooltips:["海滩","稻田","美女","豪车"],
				showActiveTooltip:true,
				fixedElements:"#navbar",
				anchors:["s1","s2","s3","s4"],
				afterLoad:function(anchor,index){
					if(index == 1){
						$(".section1 img").css("transform","scale(1.1,1.1)");
					}
					else if(index == 2){
						$(".section2 img").css("transform","skew(0deg,0deg)");
					}
					else if(index == 3){
						$(".section3 img").css("opacity","1");
					}
					else if(index == 4){
						$(".section4 img").css("transform","scale(1.1,1.1)");
					}
				},
				onLeave:function(index,next,dir){
					if(index == 1){
						$(".section1 img").css("transform","scale(1,1)");
					}
					else if(index == 2){
						$(".section2 img").css("transform","skew(20deg,0deg)");
					}
					else if(index == 3){
						$(".section3 img").css("opacity","0.3");
					}
					else if(index == 4){
						$(".section4 img").css("transform","scale(1,1)");
					}
				}
			});
		});
	</script>
</block>
	
